<template>
    <div :class="`checkinput ${this.value?'active':''}`" 
        :style="`width:${width}px;height:${height}px;line-height:${height}px`" 
        @click="change" >
        {{title}}
        <input :value="value" @input="change($event.target.value)" readonly="readonly" :disabled="disabled" />
    </div>
</template>
<script>
export default {
    name: "checkInput",
    data(){
        return {
           
        }
    },
    props:{
        width:{type:Number,default:()=>{return 90}},
        height:{type:Number,default:()=>{return 70}},
        value:{type:Boolean,default:()=>{return false}},
        title:{type:String,default:()=>{return ''}},
        disabled:{type:Boolean,default:()=>{return false}},       
    },   
    methods:{       
        change:function(){
            if(this.disabled) return;
            this.$emit('input',!this.value);         
            this.$emit('change',!this.value);
        }
    }

}
</script>
<style lang="scss" scoped>
.checkinput {
    background: #3f3f3c;
    border-radius: 3px;
    -webkit-font-smoothing: antialiased;    
    display: block;
    position: relative;
    float: left;
    margin: 5px 0 0 5px;
    cursor: pointer;
    color: #ccc;
    text-align: center;
    user-select: none;
}

.active{
    color:#4F80FF;
}

.checkinput input{
    display: none;  
}
</style>